<template>
  <div class="index_main column-flex" :ref="$route.name">
    <div>
      <div class="ttop">
        <el-form ref="form" :model="queryParams">
          <el-form-item>
            <el-select
              size="small"
              v-model="queryParams.eventLevel"
              placeholder="事件级别"
              @change="(val) => getList()"
              clearable
            >
              <el-option
                v-for="(item, index) in levelArr"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-checkbox
              v-model="tempIsShowEventOccurred"
              @change="(val) => getList()"
              >仅展示已发生事件</el-checkbox
            >
          </el-form-item>
          <el-form-item>
            <el-checkbox
              v-model="tempIsShowEventNoDisposed"
              @change="(val) => getList()"
              >仅展示未处置事件</el-checkbox
            >
          </el-form-item>
          <el-form-item> </el-form-item>
        </el-form>
        <div class="tright">
          <el-radio-group v-model="viewIndex" size="mini">
            <el-radio-button :label="0" @change.native="getList">
              分级保护视图
            </el-radio-button>
            <el-radio-button :label="1" @change.native="getList"
              >保密监管视图</el-radio-button
            >
          </el-radio-group>
          <span>
            自动切换
            <el-switch
            v-model="autoPlay" @change="handleChangePlay">
          </el-switch> 
          </span>
           
        </div>
      </div>
      <div class="dynamic-top flex">
        <!-- 左侧的 -->
        <div class="tabs">
          <span
            v-for="item in tabsArr"
            :key="item"
            class="tab_item"
            :class="activeName == item ? 'is-active' : ''"
            @click="changeActive(item)"
            >{{ item }}</span
          >
        </div>

        <!-- 右侧的 -->
        <div class="dright">
          <div class="drtooltip">
            <P><span class="bg-red">否</span>一票否决项</P>
          </div>
          <div class="drstatus">
            <div>
              <img :src="require(`@/assets/images/case/0.png`)" alt="" />
              <span>特别重大</span>
              <span>{{ lists.levelEspMajor }}</span>
            </div>
            <div>
              <img :src="require(`@/assets/images/case/1.png`)" alt="" />
              <span>重大</span>
              <span>{{ lists.levelMajor }}</span>
            </div>
            <div>
              <img :src="require(`@/assets/images/case/2.png`)" alt="" />
              <span>较大</span>
              <span>{{ lists.levelMore }}</span>
            </div>
            <div>
              <img :src="require(`@/assets/images/case/3.png`)" alt="" />
              <span>一般</span>
              <span>{{ lists.levelCommonly }}</span>
            </div>
          </div>
        </div>
        
      </div>
    </div>
    <div class="dynamic-center" v-loading="loading">
      <ThingsList :lists="lists" :showArr="showArr" />
    </div>
  </div>
</template>

<script>
import {
  gradedProtectionInfo,
  confidentialitySupervision,
  eventLevelList,
} from "@/api/dynamicCompliance";
import ThingsList from "@/components/common/ThingsList.vue";
export default {
  components: { ThingsList },

  data() {
    return {
      autoPlay:true,
      //tab页面的数据
      activeName: "",
      tabsArr: [],
      tempIsShowEventOccurred: undefined,
      tempIsShowEventNoDisposed: undefined,
      loading: false,
      lists: {},
      // 展示项
      showArr: [],
      // 级别
      levelArr: [],
      // 视图顺序
      viewIndex: 0,
      queryParams: {
        size: 10,
        current: 1,
        queryCycle: "",
        searchType: this.$store.state.searchType || "3",
      },
      timer: null,
    };
  },
  methods: {
    //  切換自动开关
    handleChangePlay(){
      if(this.autoPlay){
        this.assetsLoop();
      }else{
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    changeActive(item) {
      this.activeName = item;
      this.showArr = [item];
    },
    getList(val) {
      this.loading = true;
      this.queryParams.isShowEventNoDisposed =
        this.tempIsShowEventNoDisposed * 1 || 0;
      this.queryParams.isShowEventOccurred =
        this.tempIsShowEventOccurred * 1 || 0;
      this.showArr = [];
      this.queryParams = {
        ...this.queryParams,
        ...val,
      };
      if (this.viewIndex == 0) {
        gradedProtectionInfo(this.queryParams).then((res) => {
          this.lists = res;
          if (!res.protectCategoryVoList) {
            this.loading = false;
            return;
          }
          this.tabsArr = res.protectCategoryVoList.map((item) => {
            return item.protectCategoryName;
          });
          this.loading = false;
        });
      } else {
        confidentialitySupervision(this.queryParams).then((res) => {
          res.protectCategoryVoList = res.confidentialityTypeVoList;
          this.lists = res;
          if (!res.confidentialityTypeVoList) {
            this.loading = false;
            return;
          }
          this.tabsArr = res.confidentialityTypeVoList.map((item) => {
            return item.behaviorName;
          });
          this.loading = false;
        });
      }
    },
    assetsLoop() {
      this.timer = setInterval(() => {
        this.viewIndex = this.viewIndex == "0" ? "1" : "0";
        this.getList(this.viewIndex);
      }, 60000);
    },
  },
  mounted() {
    eventLevelList().then((res) => {
      this.levelArr = res.map((item) => {
        return {
          label: item.normalName,
          value: item.normalCode,
        };
      });
    });
    this.assetsLoop();
  },
  destroyed() {
    clearInterval(this.timer);
    this.timer = null;
  },
  watch: {
    "$store.state.time":{
      handler(val) {
        if(val && val[0]){
          let time=null
          if(this.$store.state.searchType!='custom'){
            time=null
          }else{
            time=this.$store.state.time
          }
        this.getList({
          searchType:this.$store.state.searchType,
          time
        });
        }
      },
      immediate: true,
      deep: true,
    }
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-switch__core{
  background: transparent !important;
}
::v-deep .el-switch.is-checked .el-switch__core{
  background: #00e5e6 !important;
}
.index_main {
  display: flex;
  flex-direction: column;
  .dynamic-top {
    width: 100%;
    height: 30%;
  }
  .dynamic-center {
    flex: 1;
    width: 100%;
    overflow: auto;
  }
  .bg-red{
          background:#ff3535;
          // padding:.2rem .3rem;
          display: inline-block;
          width:1.5rem;
          height:1.5rem;
          text-align:center;
          font-size:1rem;
          line-height:1.5rem;
          border-radius: 4px;
          margin:0 .5rem;
        }
  .ttop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .el-form {
      display: flex;
      .el-form-item {
        margin-right: 20px;
        margin-bottom: 0;
      }
    }
  }
  .dynamic-top {
    justify-content: space-between;
    align-items: center;
    margin: 20px 0;

    .tabs {
      display: flex;
      cursor: pointer;
      align-items: center;

      .tab_item {
        height: 40px;
        line-height: 40px;
        padding: 0 20px;
        margin-right: 3px;
        background: rgba($color: #3b8bff, $alpha: 0.1);
        color: rgba($color: #fff, $alpha: 0.8);
        &.is-active {
          border-bottom: 1px solid #00e1e4;
          background: linear-gradient(to top, #005078, #000d47);
        }
      }
    }
    .dright {
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      .drtooltip{
        margin-right:1rem;
      }
      .drstatus{
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        height: 40px;
        padding: 0 20px;
        background: rgba(59, 139, 255, 0.1);
        border: 1px solid rgba(59, 139, 255, 0.4);
        border-radius: 4px;
      & > div {
        margin-right: 20px;
        display: flex;
        align-items: center;
        &:last-of-type {
          margin-right: 0;
        }
        img {
          width: 15px;
          height: 16px;
          margin-right: 8px;
        }
        span {
          margin-right: 8px;
          &:last-of-type {
            margin-right: 0;
          }
        }
      }
      }
    
    }
    .el-select {
      width: 10rem;
      font-size: 0.875rem;
      margin-left: 1.25rem;
    }
  }
}
::v-deep {
  .el-form {
    margin-top: 0 !important;
  }
  .el-radio-button {
    margin-right: 10px;
    background-image: linear-gradient(
      to bottom,
      rgba(15, 38, 110, 0.6) 0%,
      rgba(26, 101, 174, 0.6) 100%
    );
    border: 1px solid rgba(59, 139, 255, 0.6);
    border-radius: 4px;
  }
  .el-radio-button__inner:hover {
    color: #fff;
  }
  .el-radio-group
    .el-radio-button__orig-radio:checked
    + .el-radio-button__inner {
    background-image: linear-gradient(
      to bottom,
      rgba(0, 140, 164, 0.6) 0%,
      rgba(0, 222, 226, 0.6) 100%
    );

    border-radius: 4px;
  }
}
</style>
